<template>
  <div class="bg">
    <div class="center search">
      <router-link to="/"
        ><img src="../assets/img/logo.png" alt="rose_logo" class="logo"
      /></router-link>
      <span>欢迎注册</span>
    </div>
    <div class="user center">
      <div class="form">
        <ul class="clearfix">
          <li>
            <span> 用户名：</span>
            <input type="text" placeholder="请输入用户名" v-model="unames" />
          </li>
          <li>
            <span>密码：</span>
            <input type="password" placeholder="请输入密码" v-model="upwd" />
          </li>
          <li>
            <span>确认密码：</span>
            <input type="password" placeholder="请确认密码" />
          </li>
          <li>
            <span>手机号：</span>
            <input type="text" placeholder="请输入手机号" v-model="phone" />
          </li>
          <li class="li_checkbox">
            <label>
              <input type="checkbox" name="" id="" v-model="agree" />
              <a>我已同意用户注册协议</a>
            </label>
          </li>
          <li class="li_btn">
            <button
              :disabled="!agree"
              :class="{ disabled: !agree }"
              @click="register"
            >
              确认注册信息
            </button>
          </li>
          <router-link to="/login">已有账号,去登录</router-link>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      agree: false,
      unames: "",
      upwd: "",
      phone: "",
    }
  },
  methods: {
    register() {
      const { unames, upwd, phone } = this
      const url = "http://127.0.0.1:9090/user/reg"
      const params = `unames=${unames}&upwd=${upwd}&phone=${phone}`
      this.axios.post(url, params).then(res => {
        console.log(res)
        if (res.data.code == 1) {
          alert(
            `注册成功,您的用户名是：
              ${res.data.data.unames}
              ，点击"确定"跳转到登录页面`
          )
          this.$router.push("/login")
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import url("../assets/css/user.css");
</style>
